<template>
	<view class="content">
		<view class="safeContent">
			<!-- 会员卡片 -->
			<view class="vipCard">
				<!-- 未达成 -->
				<notReach></notReach>
				<!-- 今日奖池 -->
				<view class="day">
					今日奖池<text>29,485</text>KOI
				</view>
				<view class="pension">
					<view>
						永久可领取
					</view>
					昨天全网KOI产出数量0.6%加权奖励
				</view>
				<button>领取</button>
				<view class="text">
					每日00:00刷新领取次数
				</view>
			</view>
			<view class="vipCard">
				<!-- 未达成 -->
				<notReach></notReach>
				<!-- 今日奖池 -->
				<view class="day">
					今日奖池<text>29,485</text>KOI
				</view>
				<view class="pension">
					<view>
						永久可领取
					</view>
					昨天全网KOI产出数量0.6%加权奖励
				</view>
				<button>领取</button>
				<view class="text">
					每日00:00刷新领取次数
				</view>
			</view>
			<view class="vipCard">
				<!-- 未达成 -->
				<notReach></notReach>
				<!-- 今日奖池 -->
				<view class="day">
					今日奖池<text>29,485</text>KOI
				</view>
				<view class="pension">
					<view>
						永久可领取
					</view>
					昨天全网KOI产出数量0.6%加权奖励
				</view>
				<button>领取</button>
				<view class="text">
					每日00:00刷新领取次数
				</view>
			</view>
			<view class="vipCard">
				<!-- 未达成 -->
				<notReach></notReach>
				<!-- 今日奖池 -->
				<view class="day">
					今日奖池<text>29,485</text>KOI
				</view>
				<view class="pension">
					<view>
						永久可领取
					</view>
					昨天全网KOI产出数量0.6%加权奖励
				</view>
				<button>领取</button>
				<view class="text">
					每日00:00刷新领取次数
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref } from 'vue'
	const Data = ref([
		{ grade: "10星会员", time: "2023年10月15日" },
		{ grade: "9星会员", time: "2023年10月15日" },
		{ grade: "8星会员", time: "2023年10月15日" },
		{ grade: "7星会员", time: "2023年10月15日" },
		{ grade: "6星会员", time: "2023年10月15日" },
		{ grade: "5星会员", time: "2023年10月15日" },
		{ grade: "4星会员", time: "2023年10月15日" },
		{ grade: "3星会员", time: "2023年10月15日" },
		{ grade: "2星会员", time: "2023年10月15日" },
		{ grade: "1星会员", time: "2023年10月15日" },
	])
</script>

<style>
	.content {
		min-height: 100vh;

		.safeContent {
			width: calc(100% - 62px);
			margin: 0 auto;
			padding-top: 28px;

			.vipCard {
				height: 350px;
				padding-top: 180px;
				background: url(../../static/images/Home/vipCard/card_three_bg.png) no-repeat;
				background-size: 100%;
				margin-top: 50px;
				position: relative;

				.day {
					color: #CBDDFF;
					font-size: 22px;
					text-align: center;

					text {
						font-size: 60px;
					}
				}

				.pension {
					color: #191919;
					font-size: 24px;
					background: linear-gradient(151deg, #D8E4FF 0%, #338FFF 100%);
					width: 580px;
					overflow: hidden;
					border-radius: 50px;
					line-height: 40px;
					margin: 24px auto;

					view {
						font-size: 24px;
						color: #cbddff;
						background: linear-gradient(90deg, #9E9E9E 0%, #000000 100%);
						width: 146px;
						border-radius: 50px;
						text-align: center;
						float: left;
						margin-right: 10px;
					}
				}

				button {
					border-radius: 8px;
					background: linear-gradient(151deg, #D8E4FF 0%, #338FFF 100%);
					width: 220px;
					line-height: 72px;
					box-shadow: 0px 4px 4px 0px #121317;
					font-size: 28px;
					margin-top: 60px;
				}

				.text {
					font-size: 24px;
					color: #cbddff;
					text-align: center;
					line-height: 56px;

				}
			}
		}

	}
</style>